<template>
  <div>
    <el-card shadow="hover">
      <el-row :gutter="20" class="selectBox" type="flex" align="middle">
        <el-col :span="2" class="label">日期：</el-col>
        <el-col :span="4">
          <el-date-picker v-model="date" type="date" placeholder="选择日期" value-format="yyyy-MM-dd"> </el-date-picker>
        </el-col>
        <el-col :span="2" class="label">网格员:</el-col>
        <el-col :span="4">
          <el-select v-model="grid" placeholder="请选择" @change="selectGrid">
            <el-option v-for="item in options" :key="item.userId" :label="item.fullName" :value="item.userId">
            </el-option>
          </el-select>
        </el-col>
        <el-col :span="2" class="label">上下午:</el-col>
        <el-col :span="4">
          <el-select v-model="Noon" placeholder="上午或者下午">
            <el-option label="上午" :value="1"></el-option>
            <el-option label="下午" :value="2"></el-option>
          </el-select>
        </el-col>
        <el-col :span="4">
          <el-button type="primary" @click="query">查询轨迹</el-button>
        </el-col>
      </el-row>
      <baidu-map
        class="bm-view"
        :center="gridLine.line.length ? gridLine.line[0][0] : { lat: '23.152397272862775', lng: '113.9009812868343' }"
        :zoom="17"
        :scroll-wheel-zoom="true"
        map-type="BMAP_HYBRID_MAP"
        ak="VMI7fuQnbCg9TwvIO2joHBTaYTG12s9e"
      >
        <bm-map-type :map-types="['BMAP_NORMAL_MAP', 'BMAP_HYBRID_MAP']" anchor="BMAP_ANCHOR_TOP_LEFT"></bm-map-type>
        <!-- 速度： -->
        <bm-control class="speedBox">
          <span class="label">速度：</span>
          <el-slider v-model="speed" :max="2000" style="width: 60%; margin-right: 15px"></el-slider>
          <el-button
            v-if="play"
            type="success"
            icon="el-icon-video-pause"
            size="mini"
            circle
            @click="Player"
          ></el-button>
          <el-button v-else type="primary" icon="el-icon-video-play" size="mini" circle @click="Player"></el-button>
        </bm-control>
        <bm-lushu
          v-if="gridLine.line.length"
          :auto-view="true"
          :path="gridLine.line[lineIndex]"
          :play="play"
          :speed="speed"
          :info-window="true"
          :content="gridLine.name"
          @stop="stopLushu"
        >
        </bm-lushu>
        <!-- 路径 -->
        <div v-for="(lineItem, index) in gridLine.line" :key="index">
          <bm-polyline
            v-if="lineItem.length"
            :path="lineItem"
            :stroke-color="gridLine.color"
            :stroke-opacity="1"
            :stroke-weight="5"
          >
          </bm-polyline>
        </div>
        <bm-marker v-if="gridLine.line.length && start" :position="gridLine.line[0][0]"> </bm-marker>
      </baidu-map>
    </el-card>
  </div>
</template>

<script>
import * as api from '@/api/project'
import BaiduMap from 'vue-baidu-map/components/map/Map.vue'
import BmPolyline from 'vue-baidu-map/components/overlays/Polyline'
import BmLushu from 'vue-baidu-map/components/extra/Lushu'
import BmControl from 'vue-baidu-map/components/controls/Control'
import BmMapType from 'vue-baidu-map/components/controls/MapType'

export default {
  data() {
    return {
      options: [],
      date: '',
      grid: null,
      gridInfo: {},
      gridLine: { line: [] },
      path: [],
      Noon: 1,
      speed: 300,
      play: false,
      start: true,
      lineIndex: 0,
    }
  },
  components: {
    BaiduMap,
    BmPolyline,
    BmLushu,
    BmControl,
    BmMapType,
  },
  created() {
    let data = {
      gridFlag: 1,
      pageNo: 1,
      pageSize: 1000,
    }
    api.userList(data).then(res => {
      if (res.code == '200') {
        this.options = res.data.records
      }
    })
  },
  methods: {
    // 渲染地图数据
    getLineData() {
      this.start = true
      let grid = this.gridInfo
      let data = {
        status: this.Noon,
        userId: grid.userId,
        pageNo: 1,
        pageSize: 10,
        dateTime: this.date,
      }
      this.gridLine = {
        grid: grid.userId,
        name: grid.fullName,
        color: this.getCasualeColor(),
        line: [],
      }
      api.gridLocationHistory(data).then(res => {
        if (res.code == '200' && res.data.records) {
          let rowArr = res.data.records[0][0].location
          let arr = [],
            add = []
          for (let i = 0; i < rowArr.length; i++) {
            if (rowArr[i] == 'HS') {
              rowArr.splice(0, i)
              if (add.length) arr.push(add)
              i = 0
              add = []
            } else {
              const itemArr = rowArr[i].split(',')
              let obj = {}
              for (let i = 0; i < itemArr.length; i++) {
                let iArr = itemArr[i].split(':')
                obj[iArr[0]] = Number(iArr[1])
              }
              add.push(obj)
              if (i == rowArr.length - 1) {
                arr.push(add)
              }
            }
          }
          this.gridLine.line = arr
        }
      })
    },
    // 获取随机颜色
    getCasualeColor() {
      let random = Math.random()
      if (random < 0.07) {
        random = Math.random()
      }
      let num = Math.floor(random * 16777215).toString(16)
      if (num.length < 6) {
        num += '1'
      }
      return '#' + num
    },
    draw({ el, BMap, map }, line) {
      const pixel = map.pointToOverlayPixel(new BMap.Point(line[line.length - 1].lng, line[line.length - 1].lat))
      el.style.left = pixel.x - 70 + 'px'
      el.style.top = pixel.y - 110 + 'px'
    },
    query() {
      if (!this.date) {
        this.$message({
          message: '请选择日期！',
          type: 'warning',
        })
        return
      }
      if (!this.grid) {
        this.$message({
          message: '请选择网格员！',
          type: 'warning',
        })
        return
      }
      this.getLineData()
    },
    selectGrid(e) {
      this.gridInfo = this.options.find(item => item.userId === e)
    },
    Player() {
      this.play = !this.play
      this.start = false
    },
    stopLushu() {
      this.play = false
      this.lineIndex++
      if (this.gridLine.line[this.lineIndex]) {
        this.play = true
      } else {
        this.lineIndex = 0
      }
    },
  },
}
</script>

<style lang="scss" scoped>
.bm-view {
  width: 100%;
  height: 800px;
}
.refresh {
  width: 100px;
  height: 30px;
  line-height: 30px;
  background-color: #fff;
  border: solid 1px #999;
  border-radius: 4px;
  cursor: pointer;
}
.sample {
  width: 150px;
  height: 40px;
  line-height: 40px;
  overflow: hidden;
  box-shadow: 0 0 5px #000;
  color: #fff;
  text-align: center;
  padding: 10px;
  position: absolute;
  background: rgba(0, 0, 0, 0.75);
  .contBox {
    display: flex;
    align-items: center;
    .icon {
      width: 40px;
      height: 40px;
      margin-right: 10px;
    }
    p {
      line-height: 16px;
      margin: 0;
      font-size: 14px;
    }
  }
}
.selectBox {
  padding-bottom: 20px;
  .label {
    text-align: right;
  }
}
.speedBox {
  display: flex;
  align-items: center;
  width: 500px;
  margin-left: 100px;
  padding-left: 10px;
  .label {
    color: #409eff;
  }
}
</style>
